<template>
  <div>
    <a-row :gutter="5">
      <a-col span="5" style="padding-left: 0">
        <a-select placeholder="请选择省" @change="proChange" v-model="value[0]" style="width: 130px">
          <a-select-option v-for="item in proList" :value="item.value">{{item.label}}</a-select-option>
        </a-select>
      </a-col>
      <a-col span="5" v-if="cityList.length>0 && level>=2">
        <a-select placeholder="请选择市" @change="cityChange" ref="citySelect" clearable v-model="value[1]" style="width: 130px">
          <a-select-option v-for="item in cityList" :value="item.value">{{item.label}}</a-select-option>
        </a-select>
      </a-col>
      <a-col span="5" v-if="areaList.length>0 && level>=3">
        <a-select placeholder="请选择区" @change="areaChange" ref="areaSelect" clearable v-model="value[2]" style="width: 130px">
          <a-select-option v-for="item in areaList" :value="item.value">{{item.label}}</a-select-option>
        </a-select>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  export default {
    name: 'areaSelect',
    components: {},
    model: {
      prop: 'value',
      event: 'change.value'
    },
    inject: ['formParams'],
    props: {
      level: {
        type: Number,
        default: 3
      },
      value: {
        type: [String, Array],
        default: null
      }
    },
    data() {
      return {
        areaId: {
          type: String,
          default: ''
        },
        proId: {
          type: String,
          default: ''
        },
        cityId: {
          type: String,
          default: ''
        },
        proList: [],//省
        cityList: [],//市
        areaList: []//区
      }
    },
    methods: {
      getPro() {
        this.http.get(this, {
          url: this.api.area.getPro,
          success: function(me, data) {
            me.proList = data
          }
        })
      },
      getCity(areaId) {
        this.http.get(this, {
          url: this.api.area.getCity,
          params: {
            areaId: areaId
          },
          success: function(me, data) {
            me.cityList = data
          }
        })
      }
      ,
      getArea(areaId) {
        this.http.get(this, {
          url: this.api.area.getArea,
          params: {
            areaId: areaId
          },
          success: function(me, data) {
            me.areaList = data
            if (data.length == 0) {
              me.$emit('update:areaId', '')
            }
          }
        })
      },
      proChange(value) {
        let key = value
        this.getCity(key)
        this.areaList = []
        this.proId = key
        this.$emit('change', [this.proId])
        this.formParams['proId'] = key
        this.formParams['cityId'] = ''
        this.formParams['areaId'] = ''
        if (this.$refs['citySelect']) {
          this.cityList = []
          this.cityId = ''
        }
        if (this.$refs['areaSelect']) {
          this.areaList = []
        }
      },
      cityChange(value) {
        let key = value
        this.cityId = key
        this.formParams['cityId'] = key
        this.formParams['areaId'] = ''
        this.$emit('change', [this.proId, key])
        this.getArea(key)
      },
      areaChange(value) {
        let key = value
        this.formParams['areaId'] = key
        this.$emit('change', [this.proId, this.cityId, key])
      }
    },
    created() {
      this.getPro()
      this.proId = this.value[0]
      this.cityId = this.value[1]
      this.areaId = this.value[2]
      let cityId = this.cityId
      if (this.proId) {
        this.getCity(this.proId)
      }
      if (this.cityId) {
        this.getArea(this.cityId)
      }
    }
  }
</script>

<style>
</style>
